<template>
	<div class="page has-navbar has-tabbar" v-nav="{title: '客户详情', showBackButton: true}">
		<div class="page-content padding-top reserve-margin">
			<div class="car-editor">
				<transition enter-active-class="fadeIn animated" leave-active-class="fadeOut animated">
					<div class="alert" v-if="alertShow">
						<span>修改成功</span>
					</div>
				</transition>
				<div class="userinfo">
					<div class="userinfo-title">
						<div class="userinfo-icon">
							<img :src="res.customerHeadImage" onerror="javascript:this.src='static/images/default.png';" />
						</div>
						<div class="userinfo-name">
							<span>{{res.customerNickName}}</span>
							<div class="userinfo-remarks"><i class="ion-compose"></i><input type="text" @focus="remarksFocusShow" v-model="res.customerRemark" placeholder="请输入备注" /></div>
							<button @click="submit" v-if="remarksSubmitShow">提交修改</button>
						</div>
						<div class="userinfo-date">
							最近活跃时间：{{res.createTime}}
						</div>
					</div>
					<div class="userinfo-like">
						<div class="userinfo-like-title">他喜欢</div>
						<ul>
							<li v-for="item in res.intentionInfo.ageList">{{item.carAgeRemark}}</li>
							<li v-for="item in res.intentionInfo.priceList">{{item.priceRemark}}</li>
							<li v-for="item in res.intentionInfo.seriesList">{{item.seriesName}}</li>
						</ul>
					</div>
					<div class="echarts">
						<div ref="echartscarRadarList" style=" height: 240px"></div>
					</div>
					<div class="echarts" v-show="res.intentionInfo.priceList.length">
						<div ref="echartsPrice"></div>
					</div>
					<div class="echarts" v-show="res.intentionInfo.ageList.length">
						<div ref="echartsAge"></div>
					</div>
					<div class="echarts" v-show="res.intentionInfo.seriesList.length">
						<div ref="echartsCar"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入基本模板
	import 'src/assets/css/animate.css'
	let echarts = require('echarts/lib/echarts')
	//	// 引入柱状图组件
	//	require('echarts/lib/chart/bar')
	//	// 引入提示框和title组件
	//	require('echarts/lib/component/tooltip')
	//	require('echarts/lib/component/title')
	
	export default {
		data() {
			return {
				echartsPriceData: {
					legend: {
						orient: 'vertical',
						x: 'right',
						y: '10%',
						data: ['20万~30万', '30万~50万', '70万~100万', '100万~150万']
					},
					title: {
						text: '偏爱车辆价格',
						x: 'center'
					},

					series: {
						name: '偏爱车辆价格',
						type: 'pie',
						selectedMode: 'single',
						radius: ['20%', '70%'],
						center: ['35%', '55%'],
						label: {
							normal: {
								position: 'inner',
								formatter: '{d}%',
								// formatter: '{b}\n{d}%',
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: []
					}

				},

				echartsAgeData: {
					legend: {
						orient: 'vertical',
						x: 'left',
						y: '10%',
						data: ['1年内']
					},
					title: {
						text: '偏爱车龄',
						x: 'center'
					},
					series: {
						name: '偏爱车龄',
						type: 'pie',
						selectedMode: 'single',
						radius: ['20%', '70%'],
						center: ['65%', '55%'],
						label: {
							normal: {
								position: 'inner',
								// formatter: '{b}\n{d}%',
								formatter: '{d}%',
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
								value: 335,
								name: `1年内`,
							},

						]
					}
				},

				echartsCarData: {
					legend: {
						orient: 'vertical',
						x: 'right',
						y: '10%',
						data: ['Q7(进口)', 'Alpina-B7(进口)', 'A3', 'S3(进口)']
					},
					title: {
						text: '偏爱车系',
						x: 'center'
					},
					series: {
						name: '偏爱车系',
						type: 'pie',
						selectedMode: 'single',
						radius: ['20%', '70%'],
						center: ['35%', '55%'],
						label: {
							normal: {
								position: 'inner',
								// formatter: '{b}\n{d}%',
								formatter: '{d}%',
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
								value: 335,
								name: `Q7(进口)`,
							},
							{
								value: 679,
								name: `Alpina-B7(进口)`
							},
							{
								value: 1548,
								name: `A3`
							},
							{
								value: 1548,
								name: `S3(进口)`
							}
						]
					}
				},
				echartscarRadarListData: {
	   				legend: {
		        		bottom: 5,
		        		data: ['北京'],
		        		itemGap: 20,
		        		textStyle: {
		            		color: '#fff',
		       		    	fontSize: 14
		        		},
		       			selectedMode: 'single'
	    			},
					radar: {
						indicator: [
							{
								name:'排量',
								max: 6
							},
							{
								name: '车龄',
								max: 15
							},
							{
								name: '里程',
								max: 20
							},
							{
								name: '价格',
								max: 80
							},
							{
								name: '过户',
								max: 10
							}
						],
						splitLine: {
							lineStyle: {
								color: ['rgba(255,104,22, 0.4)', 'rgba(255,104,22, 0.1)', ].reverse()
							}
						},
						shape: 'circle',
						splitNumber: 5,
						name: {
							textStyle: {
								color: '#F9713C'
							}
						},
						splitArea: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255,104,22, 0.5)'
							}
						}
					},
					series: {
						name: '偏爱车辆价格',
						type: 'radar',
						data: [
							[]
						],
						symbol: 'none',
						itemStyle: {
							normal: {
								color: '#FF6816'
							}
						},
						areaStyle: {
							normal: {
								opacity: 0.1
							}
						}
					}
				},
				remarksSubmitShow: false,
				res: {
					intentionInfo: {
						ageList: [],
						priceList: [],
						seriesList: []
					}
				},
				alertShow: false,

			}
		},
		computed: {
			echartsPrice() {
				return echarts.init(this.$refs.echartsPrice)
			},
			echartsAge() {
				return echarts.init(this.$refs.echartsAge)
			},
			echartsCar() {
				return echarts.init(this.$refs.echartsCar)
			},
			echartscarRadarList() {
				return echarts.init(this.$refs.echartscarRadarList)
			},
			customerId() {
				return this.$route.query.customerId
			}
		},
		methods: {
			echartsPriceInit() {
				this.echartsPrice.setOption(this.echartsPriceData)
				this.echartsAge.setOption(this.echartsAgeData)
				this.echartsCar.setOption(this.echartsCarData)
				// console.log(this.echartscarRadarListData)
				this.echartscarRadarList.setOption(this.echartscarRadarListData)
			},
			submit() {
				console.log(this.customerId)
				window.axios.get(baseUrl + '/crm-web/controller/customer/updateCustomerRemark', {
					params: {
						customerShopId: this.customerId,
						customerRemark: this.res.customerRemark
					}
				}).then((res) => {
					if(res != false) {
						// console.log(123)
						this.alertShow = true
						setTimeout(() => {
							this.alertShow = false
						}, 1000)
					}
				})
			},
			remarksFocusShow() {
				this.remarksSubmitShow = true
			},
			echartsInita(res) {
				console.log(res)
				this.echartsPriceData.legend.data = []
				this.echartsPriceData.series.data = []
				this.echartscarRadarListData.series.data[0][0] = res.carRadarList.carDisplacement>6?6:res.carRadarList.carDisplacement
				this.echartscarRadarListData.series.data[0][1] = 15-(res.carRadarList.carAge>15?15:res.carRadarList.carAge)
				this.echartscarRadarListData.series.data[0][2] = 20-(res.carRadarList.carMileage>20?20:res.carRadarList.carMileage)
				this.echartscarRadarListData.series.data[0][3] = res.carRadarList.carRetailPrice>80?0:80-res.carRadarList.carRetailPrice
				this.echartscarRadarListData.series.data[0][4] = 10-(res.carRadarList.carTransferNum>10?10:res.carRadarList.carTransferNum)
				
				for(let i of res.priceList) {
					this.echartsPriceData.legend.data.push(i.priceRemark)
					this.echartsPriceData.series.data.push({
						name: i.priceRemark,
						value: i.storageNum
					})
				}
				this.echartsAgeData.legend.data = []
				this.echartsAgeData.series.data = []
				for(let i of res.ageList) {
					this.echartsAgeData.legend.data.push(i.carAgeRemark)
					this.echartsAgeData.series.data.push({
						name: i.carAgeRemark,
						value: i.storageNum
					})
				}
				this.echartsCarData.legend.data = []
				this.echartsCarData.series.data = []
				for(let i of res.seriesList) {
					this.echartsCarData.legend.data.push(i.seriesName)
					this.echartsCarData.series.data.push({
						name: i.seriesName,
						value: i.storageNum
					})
				}
				this.$nextTick()
					.then(() => {
						this.echartsPriceInit()
					})

			},
			getJson() {
				window.axios.get(baseUrl + '/crm-web/controller/customer/getCustomerInfo', {
					params: {
						customerShopId: this.customerId
					}
				}).then((res) => {
					let reso = JSON.parse(res.request.responseText).result
					// console.log(reso)
					this.res = reso
					this.echartsInita(reso.intentionInfo)
				})
			}

		},

		activated() {
			console.log(this.$route.query)
			this.getJson()

		}

	}
</script>

<style scoped="scoped">
	.alert {
		position: fixed;
		z-index: 9999;
		background: rgba(0, 0, 0, .3);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.alert span {
		position: absolute;
		z-index: 2;
		padding: 8px 15px;
		color: #fff;
		border-radius: 5px;
		background: #000;
		top: 50%;
		left: 50%;
		display: block;
		transform: translate3d(-50%, -50%, 0);
		-moz-transform: translate3d(-50%, -50%, 0);
		-webkit-transform: translate3d(-50%, -50%, 0);
	}
	
	.userinfo {
		height: 100vh;
		overflow-y: auto;
	}
	
	.userinfo-title {
		padding: 15px;
		border-bottom: 1px solid #E1E1E1;
	}
	
	.userinfo-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
	}
	
	.userinfo-icon img {
		width: 100%;
	}
	
	.userinfo-name {
		display: inline-block;
		vertical-align: top;
	}
	
	.userinfo-name span {
		padding: 10px 0 0 10px;
		display: block;
	}
	
	.userinfo-remarks {
		font-size: 12px;
		height: 34px;
		line-height: 34px;
		padding-left: 40px;
		color: #999;
	}
	
	.userinfo-remarks i {
		font-size: 20px;
		vertical-align: middle;
	}
	
	.userinfo-remarks input {
		background: none;
		display: inline-block;
		font-size: 13px;
		color: #999;
		vertical-align: top;
	}
	
	.userinfo-title button {
		background: #FF6816;
		color: #fff;
		padding: 5px 10px;
		border: none;
		outline: none;
		font-size: 12px;
		border-radius: 5px;
		margin-left: 38px;
	}
	
	.userinfo-date {
		padding: 5px 0;
		font-size: 13px;
		color: #666;
	}
	
	.userinfo-like {
		border-bottom: 1px solid #E1E1E1;
		padding: 0 15px;
	}
	
	.userinfo-like-title {
		padding: 10px 0;
	}
	
	.userinfo-like ul {
		font-size: 0;
		padding: 10px 0;
	}
	
	.userinfo-like li {
		display: inline-block;
		padding: 5px 5px;
		border: 1px solid #FF6816;
		font-size: 13px;
		margin: 3px;
		border-radius: 5px;
	}
	
	.echarts {
		border-bottom: 1px solid #E1E1E1;
		padding-top: 20px;
	}
	
	.echarts div {
		width: 320px;
		height: 300px;
		margin: 0 auto;
	}
	
	.echarts:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.echarts div.min {
		width: 320px;
		height: 200px;
		margin: 0 auto;
	}
</style>